import axios from 'axios';
import React ,{useState}from 'react'
import {useNavigate} from 'react-router-dom' 
import { LogoutOutlined } from '@ant-design/icons';
import {GetFriendRouter} from '../../api' 
import { Avatar, Button ,Row,Col,Input} from 'antd'

export default function HomeView() {
  const { Search } = Input;
  const u_acc=localStorage.getItem('login-user')
  const avatar=localStorage.getItem('user-avatar')
  const [firendList,setFirendList]=useState([])
    const  navigate=useNavigate();
    const toConversation=(i)=>{
        navigate(`/conversation/${i.account}/${i.avatar}/${i.name}`)
    }
    const signOut=()=>{
      localStorage.removeItem('login-user')
      localStorage.removeItem('user-name')
      localStorage.removeItem('user-avatar')
      navigate(`/login`,
      {
        replace:true
      })
    }
   
    React.useEffect(()=>{

      if(!localStorage.getItem('login-user')){
        navigate(`/login`)
      }
    },[])
    React.useEffect( ()=>{
      axios.get(
        GetFriendRouter+`/${u_acc}`,
      ).then(res=>{
        console.log(res);
        setFirendList(res.data.data)

      })
      // console.log(f_list)
   
    },[])
    const search=(values)=>{
      console.log(values);
      if(values){
        navigate(`/userinfo/${values}`)
      }
    }
    const setInfo=()=>{
      navigate(`/userinfo/set`)
    }
    const f_list=firendList.map(i=>(
      <li className='friendlistitem' 
      key={i.id} 
      onClick={()=>toConversation(i)}> 
      <Row align='middle'>
        <Col offset={1} span={3}><Avatar size='large' src={`http://www.ayaka002.top/assets/avatar/${i.avatar}.png`} alt="avatar"/> </Col>
        <Col span={20}>
        <Row wrap="true"  justify='space-around'>
          <Col span={24} style={{fontSize:'16px',fontWeight:'bolder'}}>{i.name}</Col>
          <Col span={24}>{i.descr}</Col>
        </Row></Col>
      </Row>
    </li>)
       )
  return (
    <div>
      <div className='header'> 
      <Row align='middle'justify='space-evenly' style={{height:"50px"}}>
      <Col span={4}> <Avatar onClick={setInfo} src={`http://www.ayaka002.top/assets/avatar/${avatar}.png`} alt="avatar"/></Col>
      <Col span={12} >
        <div  style={{borderRadius:"20px",overflow:"hidden"}}><Search 
        name='search' 
        onSearch={search}
     ></Search></div></Col>
      <Col span={4} > <Button style={{color:'#fff',border:'none' ,fontSize:"18px",fontWeight:"bolder"}} onClick={signOut} type="ghost" shape="circle"  icon={<LogoutOutlined />}></Button></Col>
    </Row>

</div> 
      <div className="friendlist">{f_list}</div>
    </div>
  )
}
